<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>

<body>
  <script>
    // let str = '我爱我家'

    // 需求：将 我 进行 高亮
    // 思路：把 我 替换成  <span style="color: red">我</span>

    // replace 第一个参数可以是字符串， 也可以是正则
    // str = str.replace('我', '<span style="color: red">我</span>')
    // console.log(str);

    // 第一个参数写正则
    // g global 全局匹配搜索
    // i ignore 忽略大小写
    // str = str.replace(/我/g, '<span style="color: red">我</span>')
    // document.body.innerHTML = str;


    // 需求：把a 和 c 进行高亮
    let str2 = "abcAbac";

    // console.log(str2);

    // 以下代码不能完成以上需求：会把c替换成高亮的a
    // str2 = str2.replace(/a|c/gi, '<span style="color: red">a</span>')

    str2 = str2.replace(/a|c/gi, function (item) {
      console.log(item); // 匹配到那一项

      // return "x"   

      return `<span style="color: red">${item}</span>`
    })

    // console.log(str2);
    document.body.innerHTML = str2;


    // replace
    //  2个参数
    //  参数1： 可以是字符串，匹配查找的时候不够灵活，还可以是正则（灵活）
    //  参数2： 可以是字符串，还可以是函数，需要在函数中有返回值（就是替换后的内容）

    // 书写
    //  replace('a', 'c')
    //  replace(/a/gi, 'c');  // 缺点：定死了替换后的内容是c
    //  replace(/a/gi, function(item){   item 是匹配的哪一项   需要有return，return的结果就是替换后的内容 });  


    // 需求：把a 或 c找到，替换成大写的
    let str3 = "abcdgdc";

    str3 = str3.replace(/a|c/gi, function (item) {
      return item.toUpperCase()
    })
    console.log(str3);



    // 高亮的处理，进行封装成函数
    // str 形参：要处理的字符串
    // keyword 形参：需要高亮的部分
    function highLight(str, keyword) {
      // /a/  正则匹配a
      // /keyword/  正则匹配keyword 字符串

      // 定义正则有2方式
      //  1. /a/ 
      //  2. 构造函数来定义正则 RegExp
      //     缺点，写起来麻烦，
      //     优点：写变量
      //    new RegExp('a') ==> /a/ 
      //    new RegExp('a', 'gi') ==> /a/gi

      // 以下写法错误
      /* return str.replace(/keyword/gi, function (item) {
        return `<span style="color: red">${item}</span>`
      }) */

      // 正确做法
      const reg = new RegExp(keyword, "gi")
      return str.replace(reg, function (item) {
        return `<span style="color: red">${item}</span>`
      })
    }
    console.log(highLight("abcbsfs", "a"));
    console.log(highLight("abckeywordbsfs", "a"));
  </script>
</body>

</html>